/**
* 系统管理  日志管理
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 搜索筛选 -->
    <el-form :inline="true" :model="formInline" class="user-search">
      <el-form-item label="搜索：" size="small">
        <el-input size="small" style="width: auto;" v-model="formInline.requestUri" placeholder="请求地址"></el-input>
        <el-select size="small" style="width: auto;" v-model="formInline.method" placeholder="请求类型">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in methodList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-input size="small" style="width: auto;" v-model="formInline.businessId" placeholder="业务ID"></el-input>
        <el-select size="small" style="width: auto;" v-model="formInline.businessType" placeholder="所属模块">
          <el-option label="全部" value=""></el-option>
          <el-option
            v-for="item in typeList"
            :key="item.key"
            :label="item.value"
            :value="item.key">
          </el-option>
        </el-select>
        <el-input size="small" style="width: auto;" v-model="formInline.creator" placeholder="操作人"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索
        </el-button>
        <el-button size="small" @click="resetForm('formInline')">重置</el-button>
      </el-form-item>
    </el-form>
    <!--列表-->
    <el-table size="small" :data="listData" highlight-current-row v-loading="loading" border
              element-loading-text="拼命加载中" style="width: 100%;">
      <el-table-column align="center" prop="id" type="selection" width="60">
      </el-table-column>
      <el-table-column sortable prop="requestUri" label="请求URI" width="150">
      </el-table-column>
      <el-table-column sortable prop="method" label="请求类型" width="100">
      </el-table-column>
      <el-table-column sortable prop="ip" label="请求IP" width="120">
      </el-table-column>
      <el-table-column sortable prop="businessId" label="业务ID" width="250">
      </el-table-column>
      <el-table-column sortable prop="businessDesc" label="所属模块" width="150">
      </el-table-column>
      <el-table-column sortable prop="createTs" label="创建时间" width="150">
        <template slot-scope="scope">
          <div>{{scope.row.createTs|timestampToTime}}</div>
        </template>
      </el-table-column>
      <el-table-column sortable prop="creator" label="操作人" width="100">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="100">
        <template slot-scope="scope">
          <el-button size="mini" @click="getDetail(scope.$index, scope.row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页组件 -->
    <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    <!-- 详情界面 -->
    <el-dialog :title="title" :visible.sync="editFormVisible" width="30%">
      <el-form label-width="120px" :model="editForm" ref="editForm">
        <el-form-item label="请求参数" prop="params">
          <el-input autosize type="textarea" v-model="editForm.params" readonly="true"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import {logTypeList,logList,logDetail} from "../../api/sysLogMG";
  import Pagination from '../../components/Pagination'

  export default {
    data() {
      return {
        nshow: true, //switch开启
        fshow: false, //switch关闭
        loading: false, //是显示加载
        editFormVisible: false, //控制编辑页面显示与隐藏
        title:'日志详情',
        formInline: {
          pageNum: 1,
          pageSize: 10,
          requestUri: '',
          method: '',
          businessId: '',
          businessType: '',
          creator: ''
        },
        editForm:{
          params:''
        },
        //请求类型下拉框值
        methodList: [{
          value: 'GET',
          label: '查询'
        }, {
          value: 'POST',
          label: '添加'
        }, {
          value: 'PUT',
          label: '修改'
        }, {
          value: 'PATCH',
          label: '局部修改'
        }, {
          value: 'DELETE',
          label: '删除'
        }],
        typeList:[],//所属模块
        listData: [], //用户数据
        // 分页参数
        pageparm: {
          currentPage: 1,
          pageSize: 10,
          total: 10
        }
      }
    },
    // 注册组件
    components: {
      Pagination
    },
    /**
     * 创建完毕
     */
    created() {
      this.getData(this.formInline);
      this.logTypes();
    },

    /**
     * 里面的方法只有被调用才会执行
     */
    methods: {
      // 获取日志列表
      getData(parameter) {
        this.loading = true;
        logList(parameter).then(res => {
          this.loading = false;
          if (res.success === false) {
            this.$message({
              type: 'info',
              message: res.msg
            })
          } else {
            this.listData = res.data.list;
            // 分页赋值
            this.pageparm.currentPage = this.formInline.pageNum;
            this.pageparm.pageSize = this.formInline.pageSize;
            this.pageparm.total = res.data.count;
          }
        }).catch(err => {
          this.loading = false;
          this.$message.error('数据加载失败，请稍后再试！')
        })
      },
      //日志业务类型下拉框列表
      logTypes(){
        logTypeList().then(res => {
          this.typeList = res.data;
        }).catch(err => {
          this.$message.error('数据加载失败，请稍后再试！')
        })
      },
      //获取日志详情
      getDetail : function (index, row) {
        this.editFormVisible = true;
        logDetail(row.id).then(res=>{
          this.editForm.params = res.data.params;
          //this.editForm.params = JSON.stringify(res.data.params, null, "\t");
        }).catch(err=>{
          this.$message.error('数据加载失败，请稍后再试！')
        });

        /*this.editFormVisible = true;
        this.editForm.params = '';
        logDetail(row.id).then(res=>{
          this.editForm = res.data;
        }).catch(err=>{
          this.$message.error('数据加载失败，请稍后再试！')
        });*/
      },
      // 分页插件事件
      callFather(parm) {
        this.formInline.pageNum = parm.currentPage;
        this.formInline.pageSize = parm.pageSize;
        this.getData(this.formInline);
      },
      // 搜索事件
      search() {
        this.getData(this.formInline)
      },
      //重置表单
      resetForm() {
        this.formInline.requestUri = '';
        this.formInline.method = '';
        this.formInline.businessId = '';
        this.formInline.businessType = '';
        this.formInline.creator = '';
      }
    }
  }
</script>

<style scoped>
  .user-search {
    margin-top: 20px;
  }

  .user-search input {
    width: 20%;
  }
</style>

